<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增酒店规格</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .delAttr,.delAttrValue{
            font-size: 20px;color: #ff5722;
        }
        .attrValueDIV{
            background-color: #eee;padding: 0 8px;
        }
        .addNewAttrValue{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
        <form class="layui-form" method="post" id="specsForm">
            <div class="layui-form-item" >
                <label class="layui-form-label">关联酒店</label>
                <div class="layui-input-inline">
                    <select name="hotel_id" id="hotel_id" class="layui-select" >
                        <option value="0">通用</option>
                        {notempty name='$hotelList'}{volist name='hotelList' id='vo'}
                        <option value="{$vo.hotel_id}">{$vo.name}</option>
                        {/volist}{/notempty}
                    </select>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">规格名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spec_name" autocomplete="off" value="" placeholder="请输入规格名" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">英文名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spec_en_name" autocomplete="off" value="" placeholder="请输入规格英文名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">选择属性</label>
                <div class="layui-input-inline" style="width:200px;">
                    <select name="attrs" id="attrs" class="layui-select" lay-filter="selectAttr">
                        <option value="">请选择属性</option>
                        {notempty name='$attrs'}
                        {volist name='attrs' id='value'}
                        <option value="{$value.id}">{$value.attr_name}</option>
                        {/volist}
                        {/notempty}
                    </select>
                </div>
                <div class="layui-input-inline" id="attrValues">
                </div>
                <div class="layui-input-inline">
                    <a class="layui-btn layui-btn-sm layui-btn-normal confirmSelectValues" style="margin-top:4px;">确认</a>
                    <a class="layui-btn layui-btn-sm layui-btn-primary addNewHotelAttr" style="margin-top:4px;">添加属性</a>
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">已选属性</label>
                <div class="layui-input-inline" style="width:80%">
                    <blockquote class="layui-elem-quote elem-quote-div" id="attrValuesDIV" style="width: 80%">

                    </blockquote>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <a class="layui-btn layui-btn-sm submitSpecs" >提交</a>
                </div>
            </div>
        </form>
    </fieldset>
</div>
</body>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        selectM: './layui_extends/selectM',
        selectN: './layui_extends/selectN',
    }).use(['layer','form','jquery','selectM','selectN','laydate','table'],function() {
        var layer = layui.layer;
        var form = layui.form;
        var selectM = layui.selectM;
        //多选标签-所有配置
        form.on('select(selectAttr)',function (data) {
            var attr_id = data.value;
            renderAttrValues(attr_id);
        })

        function renderAttrValues(attr_id)
        {
            var attrValueData = [];
            var attrs = {$attrs|json_encode};
            console.log(attrs)
            $.each(attrs,function (i,v) {
                if(v.id==attr_id){
                    attrValueData = v.subValues;
                    return false;
                }
            })
            console.log(attrValueData)

            $("#attrValues").children().remove();
            if(attrValueData.length > 0){
                //创建容器
                var container = (new Date()).getTime();
                $("#attrValues").append('<div id="'+ container +'"></div>');
                selectM({
                    elem: '#' + container //元素容器【必填】
                    ,data: attrValueData //候选数据【必填】
                    ,selected: []      //默认值
                    ,max : 10    //最多选中个数，默认5
                    ,name: 'attr_values_input'  //input的name 不设置与选择器相同(去#.)
                    ,delimiter: ','    //值的分隔符
                    ,field: {idName:'id',titleName:'attr_value'}   //候选项数据的键名
                });
            }
        }

        $(".addNewHotelAttr").click(function(){
            layer.open({
                type:2,
                title:'新增属性',
                scrollBar:false,
                area:['100%','100%'],
                content:"{:url('admin/hotel/addNewHotelAttr')}",
                end:function () {
                    window.location.reload();
                }
            })
        })
        //获取多选选中的值
        function getMoreSelectValues(input_name,attrValueData)
        {
            var selectValuesArr = [];
            var attr_values_str = $("input[name="+ input_name+"]").val();
            if(attr_values_str==undefined || attr_values_str==''){return false;}
            var attr_values_arr = attr_values_str.split(',');
            $.each(attrValueData,function (i,v) {
                if($.inArray(v.id.toString(),attr_values_arr) > -1){
                    selectValuesArr.push(v);
                }
            })
            return selectValuesArr;
        }

        $(".confirmSelectValues").click(function () {
            var attr_id = $("select[name=attrs]").val();
            var attr_name = "";
            var attrs = {$attrs|json_encode};
            var attrValueData = [];
            $.each(attrs,function (i,v) {
                if(v.id==attr_id){
                    attrValueData = v.subValues;
                    attr_name = v.attr_name;
                    return false;
                }
            })
            var datas = getMoreSelectValues('attr_values_input',attrValueData);
            renderSelectedAttrValues(attr_id,attr_name,datas);
        })
        function renderSelectedAttrValues(attr_id,attr_name,datas){
            //检查是否重复设置
            $('#attrValuesDIV .attrID').each(function (i,v) {
                if($(v).attr('data-id')==attr_id){
                    $(v).parent().parent().remove();return false;
                }
            })
            var html = '<div class="layui-card">' +
                '<div class="layui-card-header">' +
                '<div class="layui-inline attrID" data-id="'+ attr_id +'">'+ attr_name +'</div>' +
                '<i class="layui-icon delAttr">&#x1006;</i>' +
                '</div>' +
                '<div class="layui-card-body">';
            $.each(datas,function (i,v) {
                html += '<div class="layui-inline attrValueDIV">' +
                    '<div class="layui-inline attrValueID" data-id="'+ v.id+'">' + v.attr_value+ '</div>' +
                    '<i class="layui-icon delAttrValue" >&#x1006;</i>' +
                    '</div>';
            })
            html += '<div class="layui-inline attrValueDIV">' +
                '<div class="layui-inline">' +
                '<input type="text" name="newAttrValue" class="layui-input layui-input-inline" autocomplete="off">' +
                '<a class="layui-btn layui-btn-xs addNewAttrValue">添加</a>' +
                '</div>' +
                '</div>';
            html += '</div>' +
            '</div>';
            $('#attrValuesDIV').append(html);
        }

        $(document).on('click','.delAttr,.delAttrValue',function () {
            $(this).parent().parent().remove();
        })
        $(document).on('click','.addNewAttrValue',function () {
            var attrValue = $(this).prev().val();
            if(attrValue=='' || attrValue==undefined){return false;}
            var repeat = false;
            $(this).parent().parent().parent().find(".attrValueID").each(function(i,v){
                if($(v).text() == attrValue){repeat = true;layer.msg('请勿重复添加！');return false;}
            })
            if(repeat){return false;}
            var html = '<div class="layui-inline attrValueDIV">' +
                '<div class="layui-inline attrValueID" data-id="">' + attrValue + '</div>' +
                '<i class="layui-icon delAttrValue" >&#x1006;</i>' +
                '</div>';
            //找到自己的父级
            var node = $(this).parent().parent().parent();
            //复制自己
            html += '<div class="layui-inline attrValueDIV">' + $(node).children(":last-child").html() + '</div>';

            //删除自己
            $(this).parent().parent().remove();
            node.append(html);
        })

        $(".submitSpecs").click(function () {
            //验证json串
            var attr_json = [];
            var attrs = $("#attrValuesDIV .layui-card");
            attrs.each(function(i,v){
                var attr_id = $(v).find('.attrID').attr('data-id');
                var attr_name = $(v).find('.attrID').text();
                var sub = [];
                $(v).find('.attrValueID').each(function (ii,vv) {
                    var attr_value_id = $(vv).attr('data-id');
                    var attr_value = $(vv).text();
                    sub.push({id:attr_value_id,name:attr_value});
                })
                attr_json.push({id:attr_id,name:attr_name,sub:sub});
            })

            var hotel_id = $('select[name=hotel_id]').val();
            var spec_name = $('input[name=spec_name]').val();
            if(spec_name=='' || spec_name==undefined){layer.msg('请补充规格名称！');return false;}
            var spec_en_name = $('input[name=spec_en_name]').val();

            var loading = layer.load(2);
            $.post("{:url('admin/hotel/addNewHotelSpec')}",{
                hotel_id:hotel_id
                ,spec_name:spec_name
                ,spec_en_name:spec_en_name
                ,attr_json:attr_json
            },function (res) {
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code > 0){
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    },1500)

                }
            },'json')
            return false;
        })
    });

</script>
</html>
